<template>
	<div class="index-goods-search">
		<div class="com-header border-1px">
			<div class="back"
				onclick="javascript:history.go(-1)"
			>
				<i class="iconfont">&#xe697;</i>
			</div>
			<div class="content">
				{{keyword}}
			</div>
		</div>
		<div class="nav border-1px">
			<ul class="nav-items">
				<li class="nav-item"
					@click="change(1)"
				>
					<p :class="[ isStyle1 ? 'active' : '' ]">最新</p>
				</li>
				<li class="nav-item"
					@click="change(2)"
				>
					<p :class="[ isStyle2 ? 'active' : '' ]">销量</p>
				</li>
				<li class="nav-item"
					@click="change(4)"
				>
					<p :class="[ isStyle4 ? 'active' : '' ]">价格<span :class="[ isStyle4 ? [ isLow ? 'high' : 'low' ] : 'gray' ]"></span></p>
				</li>
				<li class="nav-item"
					@click="change(5)"
				>
					<p :class="[ isStyle5 ? 'active' : '' ]">佣金<span :class="[ isStyle5 ? [ isLow ? 'high' : 'low' ] : 'gray' ]"></span></p>
				</li>
			</ul>
		</div>
		<div class="station" id="station"></div>
		<Scroll :on-refresh="onRefresh" 
			:on-infinite="onInfinite" 
			:loadingText = "loadingText" 
			@topshow="topshow"
			:scrollNum="scrollNum"
		>
			<div class="sp-content"
				id="sp-content"
			>
				<GoodOne :goodsList=goodsList></GoodOne>
			</div>
		</Scroll>
		<GoTop :goTop="goTop"
            v-show="topclass"
        ></GoTop>
	</div>
</template>
<script>
	import { Toast } from 'mint-ui'
	import axios from 'axios'
	import Http from '../http.js'
	import GoTop from '../components/GoTop.vue'
	import GoodOne from '../components/goods_one.vue'
	import Scroll from '../components/my_scroll.vue'
	export default{
		components: {
			GoTop,
			GoodOne,
			Scroll
		},
		data(){
			return{
				scrollNum: 1, 
				loadingText: '加载中...',
				topclass: false,
				isStyle1: true,
				isStyle2: false,
				isStyle3: false,
				isStyle4: false,
				isStyle5: false,
				isLow: false,
				keyword: this.$route.params.keyword,
				cate_id: this.$route.params.id,
				page: 1,
				name: 'news', 
				is_coupon: 0,
				goodsList: [],
				goodList: []
			}
		},
		mounted(){
			this.getData()
			// window.addEventListener('scroll', this.handleScroll);
		},
		methods: {
			goDetail: function(goods){
				if ( goods.is_tmall == 1 ) {
					this.type = 1
				} else {
					this.type = 2
				}
				this.$router.push({
					path: '/product/detail/' + goods.origin_id,
					query: {
                        type: this.type,
                        is_collect: goods.is_collect
					}
				})
			},
			onRefresh(done) {
            	document.getElementById('help').style.display="none";
	            this.getData();
	            done();
	            Toast({
				    message: '刷新完成',
				    position: 'bottom',
				    duration: 500
				});     
		    },
		    onInfinite(done) {
		    	document.getElementById('help').style.display="none";
		    	document.querySelector('.load-more').style.display = 'block';
		    	let vm = this;
		    	var params = new URLSearchParams();
				params.append('keyword', this.keyword);
				params.append('page', this.page);
				params.append('cate_id', this.cate_id);
				axios.post(Http.FILTERGOODS + '&' + this.name + '=1', params).then( res =>{
					var ret = res.data;
					var arr = ret['data'];
					vm.goodsList = vm.goodsList.concat(arr);
					if (arr.length > 9) {
						vm.page ++;
						// this.$el.querySelector('.load-more').style.display = 'none';
						done() // call done
					}else{
						vm.loadingText = "加载完毕";
						setTimeout(hideLoad, 2000);
						function hideLoad (){
							document.querySelector('.load-more').style.display = 'none';
						}
					}
				})
		    },
		    topshow: function(a){
		    	this.topclass = a;
		    },
			goTop: function(){
                document.getElementById("sp-content").scrollIntoView();
            },
			goSearch: function(){
				this.keyword = this.keyword;
				this.sector_id = 5;
				this.getData();
			},
			change: function(type){
				if( type == 1 ){
					this.isStyle1 =true;
					this.isStyle2 =false;
					this.isStyle4 =false;
					this.isStyle5 =false;
					this.name = 'news'
				}else if ( type == 2 ){
					this.isStyle1 =false;
					this.isStyle2 =true;
					this.isStyle4 =false;
					this.isStyle5 =false;
					this.name = 'sales'
				}else if ( type == 4 ){
					this.isStyle1 =false;
					this.isStyle2 =false;
					this.isStyle4 =true;
					this.isStyle5 =false;
					if( this.isLow == false ){
						this.name = 'price_up';
						this.isLow = true;
					}else if(this.isLow == true){
						this.name = 'price_down';
						this.isLow = false;
					}					
				}else if ( type == 5 ){
					this.isStyle1 =false;
					this.isStyle2 =false;
					this.isStyle4 =false;
					this.isStyle5 =true;
					if( this.isLow == false ){
						this.name = 'tkrates_up';
						this.isLow = true;
					}else if(this.isLow == true){
						this.name = 'tkrates_down';
						this.isLow = false;
					}
				}
				this.getData();
			},
			getData(){
				// this.cate_id = 1;
				var params = new URLSearchParams();
				params.append('keywords', this.keyword);
				params.append('page', this.page);
				params.append('cate_id', this.cate_id);
				axios.post(Http.FILTERGOODS + '&name=' + this.name, params).then( res =>{
					var ret = res.data;
					this.goodsList = ret['data'];
				})
			}
		},
		destroyed () {//离开该页面需要移除这个监听的事件
            window.removeEventListener('scroll', this.handleScroll)
        }
	}
</script>
<style lang="scss" scoped>
	.index-goods-search{
		.com-header{
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			z-index: 99;
		}
		.nav{
			position: fixed;
			top: 0.88rem;
			left: 0;
			width: 100%;
			height: 0.8rem;
			line-height: 0.8rem;
			background: #fafafa;
			z-index: 99;
			.nav-items{
				display: flex;
				align-items: center;
				.nav-item{
					flex: 0 0 25%;
					p{
						color: #666;
						&.active{
							color: rgb(255,101,68);
						}
						span{
							display: inline-block;
							margin-left: 0.08rem;
							width: 0.12rem;
							height: 0.8rem;
							vertical-align: top;
							&.gray{
								background: url(../assets/img/paixu_default.png) center center no-repeat;
								background-size: contain;
							}
							&.high{
								background: url(../assets/img/paixu_default_top.png) center center no-repeat;
								background-size: contain;
							}
							&.low{
								background: url(../assets/img/paixu_default_down.png) center center no-repeat;
								background-size: contain;
							}
						}
					}
				}
			}			
		}
		.sp-content{
			width: 100%;
			background: #f1f1f7;
		}
		.station{
			width: 100%;
			height: 1.67rem;
		}
	}
</style>